@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';


.icon {
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
  }
}

.label {
  @include composite-var($sans-label-l);

  color: $sys-invert-neutral-text-main;
}

.container {
  @include composite-var($toaster-user-action-toast-container);

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  background-color: $sys-invert-neutral-background;

  &[data-appearance='error'] {
    .icon {
      color: $sys-red-accent-default;
    }
  }

  &[data-appearance='warning'] {
    .icon {
      color: $sys-yellow-accent-default;
    }
  }

  &[data-appearance='success'] {
    .icon {
      color: $sys-green-accent-default;
    }
  }
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $sys-invert-neutral-text-main
}

.contentLayout {
  @include composite-var($toaster-user-action-toast-content-layout);

  display: flex;
  align-items: center
}
